<header class="page-header clearfix">
    <h4><a ui-sref="k8s-node.group({kDbCode: dtl.dbCode})"><i class="fa fa-arrow-left"></i></a>宿主机 {{::dtl.addr}}</h4>
    <div ng-if="dtl.nodeStatus" ng-switch="dtl.unschedulable" class="toolbox">
        <button type="button" ng-click="dtl.startNode()" ng-switch-when="true"><i class="fa fa-play"></i>启用</button>
        <button type="button" ng-click="dtl.stopNode()" ng-switch-when="false"><i class="fa fa-pause"></i>停用</button>
        <button type="button" ng-switch-when="loading"><i class="fa fa-spin fa-refresh fa-fw margin-left-5"></i></button>
    </div>
    <ol class="breadcrumb">
        <li><a ng-href="#/k8s">容器集群</a></li>
        <li><a ui-sref="k8s-node.group({kDbCode: dtl.dbCode})">宿主机</a></li>
        <li class="active">宿主机详情</li>
    </ol>
</header>
<section>
    <div class="panel no-padding node-detail-panel">
        <div class="panel-body">
            <div>
                <ul class="nav nav-tabs" ng-switch="dtl.nodeStatus">
                    <li ng-class="{active: dtl.chartType == 'cpu'}">
                        <a href="javascript:void(0)" ng-click="dtl.renderChart('cpu')">CPU
                            <span ng-switch-when="true" class="label label-success">{{dtl.cpuUsage}}%</span>
                            <span ng-switch-when="false" class="label label-danger">N/A</span>
                        </a>
                    </li>
                    <li ng-class="{active: dtl.chartType == 'mem'}">
                        <a href="javascript:void(0)" ng-click="dtl.renderChart('mem')">内存
                            <span ng-switch-when="true" class="label label-info">{{dtl.memUsage}}%</span>
                            <span ng-switch-when="false" class="label label-danger">N/A</span>
                        </a>
                    </li>
                    <li ng-class="{active: dtl.chartType == 'file'}">
                        <a href="javascript:void(0)" ng-click="dtl.renderChart('file')">文件系统
                            <select style="border: none;background: transparent; border-bottom:1px solid #ccc;
                            outline: none" ng-options="opt for opt in dtl.fileAdapts" ng-model="dtl.fileAdapt"
                                    ng-change="dtl.renderChart('file', true)">
                            </select>
                        </a>
                    </li>
                    <li ng-class="{active: dtl.chartType == 'network'}" class="net-tab">
                        <a href="javascript:void(0)" ng-click="dtl.renderChart('network')">网络
                            <select style="border: none;background: transparent; border-bottom:1px solid #ccc;
                            outline: none" ng-options="opt for opt in dtl.netAdapts" ng-model="dtl.netAdapt"
                                    ng-change="dtl.renderChart('network', true)">
                            </select>
                        </a>
                        <a href="javascript:void(0)" ng-repeat="ele in ::dtl.netTypes" ng-if="dtl.chartType == 'network'" ng-class="{netactive: dtl.netType == ele.type}" ng-click="dtl.changeType(ele.type)">{{ele.name}}</a>
                    </li>
                </ul>
            </div>
            <div class="clearfix">
                <ui-chart class="margin-top-15 margin-bottom-10"
                          model="dtl.chartModel" data="dtl.chartData" config="dtl.chartConf" ></ui-chart>
            </div>

        </div>
    </div>
    <div class="panel">
        <div class="panel-heading">详情</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6">
                    <dt>IP地址</dt>
                    <dd>{{::dtl.addr}}</dd>
                    <dt>外部ID</dt>
                    <dd>{{::dtl.externalID}}</dd>
                    <dt>资源</dt>
                    <dd>
                        <table>
                            <tbody>
                            <tr>
                                <td>CPU</td>
                                <td>{{::dtl.capacity.cpu}} 核</td>
                            </tr>
                            <tr>
                                <td>内存</td>
                                <td>{{::dtl.capacity.memory}}</td>
                            </tr>
                            <tr>
                                <td>容器数</td>
                                <td>{{::dtl.capacity.pods}} 个</td>
                            </tr>
                            </tbody>
                        </table>
                    </dd>
                </div>
                <div class="col-md-6 col-desc-padding">
                    <dt>系统信息</dt>
                    <dd>
                        <table>
                            <tbody>
                            <tr ng-repeat="ele in ::dtl.nodeInfo">
                                <td>{{::ele.key}}</td>
                                <td>{{::ele.val}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </dd>
                </div>
            </div>
            <dt>Labels</dt>
            <dd>{{::dtl.labels.join(', ')}}</dd>
        </div>
    </div>
    <div class="panel panel-list">
        <div class="panel-heading">Pod列表</div>
        <div ui-view class="panel-body"></div>
    </div>
</section>